<template>
	<view class="holdon" @touchmove.stop.prevent>
		<image class="ball" :style="'left:'+(moveX == 0 & x>0? x:moveX)+'px;top:'+(moveY == 0 & y>0? y:moveY)+'px'"
				@touchstart="drag_start" @touchmove.prevent="drag_hmove" @tap="jumpTo()" :src="image"  mode="widthFix">
		</image>
    </view>
</template>

<script>
export default {
	props: {
		x: {
			type: Number,
			default: 20
		},
		y: {
			type: Number,
			default: 200
		},
		image: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			start: [0, 0],
			moveY: 0,
			moveX: 0
		}
	},
	methods: {
		drag_start(event) {
			// this.start[0] = event.touches[0].clientX - event.target.offsetLeft
			this.start[1] = event.touches[0].clientY - event.target.offsetTop
		},
		drag_hmove(event) {
			let tag = event.touches
			// this.moveX = tag[0].clientX - this.start[0]
			this.moveY = tag[0].clientY - this.start[1]
		},
		jumpTo() {
			let id = uni.getStorageSync('user_id')
			uni.navigateTo({
				url: `/pages/getGuest/index?owner_user_id=${id}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.holdon {
		width: 100%;
		height: 100%;
	}
	.ball {
		width: 120upx;
		height: 120upx;
		// background: linear-gradient(to bottom, #f8f8ff, #87cefa);
		// border-radius: 50%;
		// box-shadow: 0 0 15upx #87cefa;
		// color: #fff;
		font-size: 30upx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed !important;
		z-index: 1000000;
        top: 100px;
        left: 50px;
		img {
			width: 100px;
			height: 100px;
		}
	}
</style>
